<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css" href="../../common/bootstrap/css/bootstrap.css" media="all">
    <link rel="stylesheet" type="text/css" href="../../common/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="../../common/global.css" media="all">
    <link rel="stylesheet" type="text/css" href="../../css/customer_list.css" media="all">
    <link rel="stylesheet" type="text/css" href="../../common/zTree/css/metroStyle/metroStyle.css">
    <link rel="stylesheet" type="text/css" href="../../common/zTree/css/zTreeStyle/zTreeStyle.css">

    <style>
        #roleAuthTable + .layui-table-view .layui-table tbody tr:hover {
            background-color: transparent;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar layui-form-pane" style="padding: 13px 0;">
                <div class="layui-inline">
                    <label class="layui-form-label">关键字</label>
                    <div class="layui-input-inline mr0 clear-input">
                        <input id="roleEdtSearch" class="layui-input" type="text" placeholder="输入关键字" autocomplete="off"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <button id="roleBtnSearch" class="layui-btn icon-btn">查询
                    </button>
                    <button id="roleBtnAdd" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>
                </div>
            </div>

            <table class="layui-table" id="roleTable" lay-filter="roleTable"></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="roleTableBar">
    <a class="layui-btn-a" lay-event="auth">接口权限</a>
    {{# if(d.role_id !== 1){ }}
    <a class="layui-btn-a bgeee" lay-event="edit" style="color: #fff">修改</a>
    <a class="layui-btn-a bg999" lay-event="del" style="background-color: #FF794E; color: #fff">删除</a>
    {{# } }}
</script>
<!-- 表单弹窗 -->
<script type="text/html" id="roleForm">
    <form lay-filter="roleForm" class="layui-form model-form">
        <input name="role_id" type="hidden"/>
        <div class="layui-form-item" style="margin-top: 20px;">
            <label class="layui-form-label"><span class="txt-impt">*</span>角色名</label>
            <div class="layui-input-block">
                <input name="role_name" placeholder="请输入角色名" type="text" class="layui-input"
                       maxlength="20" lay-verify="required" autocomplete="off" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="comments" placeholder="请输入备注" class="layui-textarea" autocomplete="off" maxlength="200"></textarea>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button class="layui-btn" lay-filter="roleFormSubmit" lay-submit style="margin-right: 20px;">保存</button>
        </div>
    </form>
</script>

<!-- 接口权限  -->
<script type="text/html"  id="authModel">
    <tree id="test13" class="ztree"></tree>
</script>
<!-- js部分 -->
<!-- js部分 -->
<script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../../common/zTree/js/jquery.ztree.all-3.5.min.js"></script>

<script type="text/javascript" src="../../common/layui/layui2.js"></script>

<script type="text/javascript" src="../../js/main.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript" src="../../jsplug/xm-select.js"></script>
<script>
    layui.use(['jquery', 'layer', 'form', 'table', 'util', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var admin = layui.admin;
        var selectOption = layui.selectOption;
        $(".layui-breadcrumb").find("a").first().html("<i class='layui-icon layui-icon-refresh-3'></i>")
            $(".layui-breadcrumb").find("a").first().attr("href","javascript:void(0);");
            $(".layui-breadcrumb").find("a").first().attr("ew-event","refresh");
        //渲染表格
        table.render({
            elem: '#roleTable',
            url: access_baseurl + 'Sysrole/lst.html',
            where:{},
            page: true,
            cellMinWidth: 100,
            cols: [[
                {field: 'role_name', title: '角色名称'},
                {field: 'comments', title: '备注'},
                {field: 'create_time', title: '创建时间'},
                {align: 'left', toolbar: '#roleTableBar', title: '操作'}
            ]]
        });

        // 添加按钮点击事件
        $('#roleBtnAdd').click(function () {
            showEditModel();
        });

        // 搜索按钮点击事件
        $('#roleBtnSearch').click(function () {
            var keyword = $('#roleEdtSearch').val();
            table.reload('roleTable', {where: {keyword: keyword}});
        });

        // 工具条点击事件
        table.on('tool(roleTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') { //修改
                showEditModel(data);
            } else if (obj.event === 'del') { // 删除
                doDelete(obj);
            } else if (obj.event === 'auth') {  // 权限管理
              showPermModel1(obj.data.role_id);
            }
        });

        // 删除
        function doDelete(obj) {
            layer.confirm('确定要删除吗？', {
                area: '600px',
                offset: 'auto',
                skin: 'layui-layer-admin'
            }, function (i) {
                layer.close(i);
                layer.load(2);
                send_req('Sysrole/del.html', {role_id: obj.data.role_id}, function(){
                    layer.closeAll('loading');
                    table.reload('roleTable');
                    layer.closeAll();
                })
            });
        }


        // 角色管理
        function showEditModel(data) {
            admin.open({
                type: 1,
                area: '600px',
                offset: 'auto',
                title: data ? '修改角色' : '添加角色',
                content: $('#roleForm').html(),
                success: function () {
                    var msg = data ? '修改' : '添加'
                    form.val('roleForm', data);
                    // 表单提交事件
                    form.on('submit(roleFormSubmit)', function (d) {
                        layer.load(2);
                        send_req('Sysrole/add_or_save.html', d.field, function(data){
                            layer.closeAll('loading');
                            table.reload('roleTable');
                            layer.closeAll();
                            layer.msg(msg + "成功",{ icon: 1, time:1000 });
                        })
                        return false;
                    });
                }
            });
        }

        // 权限管理
        function showPermModel1(roleId) {
            admin.open({
                title: '角色权限分配',
                btn: ['保存', '取消'],
                area: ['400px', '730px'],
                offset: ['-250px','650px'],
                // offset: 'auto',
                content: '<ul id="treeAuth" class="ztree"></ul>',
                success: function (layero, index) {
                    // $(layero).children('.layui-layer-content').css({'max-height': '300px', 'overflow': 'auto'});
                    // layer.load(2);
                    $('#treeAuth').parent().parent().css('top',  ($(window).height() - $('#treeAuth').parent().parent().width())/2)
                    var setting = {
                        check: {enable: true}, 
                        data: {simpleData: {enable: true}},
                    };
                    var zNodes = [], all_data;
                    send_req('Sysmenu/auth_lst.html', {role_id: roleId}, function(data){
                        all_data = data
                        data.forEach((ele) => {
                            var obj = {};
                            obj.id = ele.menu_id;
                            obj.pId = ele.parent_id;
                            obj.name = ele.menu_name;
                            obj.checked = ele.checked;
                            zNodes.push(obj);
                        })
                    },false)
                     $.fn.zTree.init($('#treeAuth'), setting, zNodes);
                     var zTreeObj = $.fn.zTree.getZTreeObj('treeAuth')
                     $.each(all_data, function(i){
                         var node = zTreeObj.getNodeByParam('id', zNodes[i].id)
                         if(all_data[i].checked == 1){
                            node.checked = true;
                            zTreeObj.updateNode(node.ture)
                         }
                     })
                     zTreeObj.expandAll(true)

                    $("#treeAuth").parent().parent().css("top","30px");
                    // console.log($("#treeAuth").parent().parent().html())

                    // selectOption.send_req('qisheng/Sysmenu/lst.html', {role_id: roleId}, function(data){
                    //   $.fn.zTree.init($('#treeAuth'), setting, res);
                    //   layer.closeAll('loading');
                    // })
                    // $.get('../../json/authTree.json', {
                    //     roleId: roleId
                    // }, function (res) {
                    //     $.fn.zTree.init($('#treeAuth'), setting, res);
                    //     layer.closeAll('loading');
                    // }, 'json');
                },
                yes: function (index) {
                    layer.load(2);
                    var treeObj = $.fn.zTree.getZTreeObj('treeAuth');
                    var nodes = treeObj.getCheckedNodes(true);
                    var ids = new Array();
                    for (var i = 0; i < nodes.length; i++) {
                        ids[i] = nodes[i].id;
                    }
                    send_req('Sysmenu/add_save_auth.html', {role_id: roleId, authids:ids.toString()}, function(data){
                        layer.closeAll('loading');
                        table.reload('roleTable');
                        layer.closeAll();
                    })
                }
            });
        }
        // 权限管理
    });
</script>
</body>
</html>